<template>
    <div class="cmdlist-wrap">
      <checkbar v-if="hasTag && hasTag.length" :tagArr="tagArr" @showType="showType"></checkbar>
      <scrollList ref="cmdlist" :loadMore="true" :bounce="true" :loadstatus="loadstatus" @scrollEndHandle="loadmore">
        <div slot="scrolllist">
          <div class="cmd-item" v-for="(child, cindex) in cmdlist" :key="`cmdItem${cindex}${param.page}`">
            <div class="cmd-body">
              <div class="cmd-avator">
                <img :src="child.headImg">
              </div>
              <div class="cmd-info">
                <h4>{{child.showName === 0 ? (child.nickName ? child.nickName : '匿名') : '匿名'}}</h4>
                <p>
                  <i v-for="(star, index) in starArr" :key="`${child.nickName}${index}`" :class="`star ${child.score > index ? 'on' : ''}`"></i>
                  <span class="time">{{child.createTime}}</span>
                </p>
              </div>
            </div>
            <div class="cmd-crumbs" v-if="child.labelNames.length">
              <div class="crumb" v-for="(item, index) in child.labelNames" :key="`crumb${index}`"><span>{{item}}</span></div>
            </div>
          </div>
        </div>
      </scrollList>
      <empty v-if="cmdlist && !cmdlist.length"></empty>
    </div>
</template>

<script type="text/ecmascript-6">
  import checkbar from './com/checkbar';
  import scrollList from '@/components/scroll/list';
  import {cmdList} from '@/mock/mock';
  import empty from '@/components/other/empty';
  import functionalTool from '@/utils/functionTools';
  export default {
    name: 'cmdlist',
    data () {
      return {
        param: {
          page: 1,
          pagecount: 10,
          labelId: ''
        },
        cmdlist: null,
        initHandler: null,
        loadstatus: 0,
        starArr: [],
        tagArr: [],
        hasTag: []
      }
    },
    created () {
      this.starArr.length = 5;
    },
    mounted () {
      this.initList().next();
    },
    methods: {
      *initList () {
        yield this.getCmdList().then((r) => {
          this.hasTag = r.userOrderCommentDataList;
          this.initScroll();
        });
      },
      async getCmdList () {
        if (functionalTool.getUrlParam('id')) {
          this.param = Object.assign(this.param, {id: functionalTool.getUrlParam('id')});
        } else {
          this.param = Object.assign(this.param, {
            ownerId: functionalTool.getUrlParam('ownerId') || '9240fb47-4c71-4689-9445-fbd140140ba3',
            stubId: functionalTool.getUrlParam('stubId') || ''
          });
        }
        try {
          const resData = await cmdList(this.param);
          if (resData.data.code === '200' || resData.data.code === '304') {
            this.cmdlist || (this.cmdlist = []);
            resData.data.data && (this.cmdlist = this.cmdlist.concat(resData.data.data.userOrderCommentDataList));
            resData.data.data && (this.tagArr = resData.data.data.commentLabels);
            return resData.data.data;
          } else {
            this.cmdlist = [];
          }
        } catch (e) {
          console.log(e);
        }
      },
      showType (e) {
        this.param.labelId = e;
        this.param.page = 1;
        this.cmdlist = null;
        this.getCmdList().then(() => {
          this.refresh();
        });
      },
      initScroll () {
        this.$nextTick(() => {
          this.$refs.cmdlist && this.$refs.cmdlist._initComponent();
        });
      },
      refresh () {
        this.$nextTick(() => {
          this.$refs.cmdlist && this.$refs.cmdlist.refresh();
        });
      },
      loadmore () {
        this.loadstatus = -1;
        this.param.page += 1;
        this.getCmdList().then((e) => {
          if (e && e.userOrderCommentDataList && e.userOrderCommentDataList.length) {
            this.loadstatus = 1
          } else {
            this.param.page -= 1;
            this.loadstatus = 2;
          }
          setTimeout(() => {
            this.loadstatus = 0;
          }, 500);
        });
      }
    },
    components: {
      checkbar,
      scrollList,
      empty
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
@import '~@/assets/css/mixin.styl';
  .cmdlist-wrap
    position relative
    height 100%
    .scrollwrap
      top rpx(90)
      .cmd-item
        border-1px(#eeeeee, 0, solid)
        font-size rpx(24)
        .cmd-body
          display flex
          align-items center
          padding rpx(20) rpx(30) rpx(28) rpx(30)
          .cmd-avator
            flex 0 0 rpx(80)
            width rpx(80)
            height rpx(80)
            overflow hidden
            border-radius 50%
            margin-right rpx(20)
            & img
              display block
              width 100%
              height 100%
              background-color #ccc
          .cmd-info
            flex 1
            & h4
              font-size rpx(28)
              line-height rpx(36)
              font-weight bold
            & p
              display flex
              font-size 0
              height rpx(36)
              line-height rpx(36)
              align-items center
              .star
                display block
                vertical-align middle
                width rpx(24)
                height rpx(22)
                background url("~@/assets/img/star_line.png") no-repeat
                background-size 100% 100%
                margin-right rpx(10)
              & .on
                background url("~@/assets/img/star_fill.png") no-repeat
                background-size 100% 100%
              .time
                display block
                font-size rpx(24)
                margin-top rpx(4)
                margin-left rpx(18)
                color #999
        .cmd-crumbs
          display flex
          flex-wrap wrap
          padding 0 rpx(20) rpx(16) rpx(20)
          .crumb
            min-width rpx(120)
            height rpx(50)
            line-height rpx(50)
            border-radius rpx(50)
            text-align center
            background-color #fff5ed
            padding 0 rpx(40)
            margin rpx(4) rpx(10) rpx(10) rpx(10)
</style>
